HTML CSS display

在寫 HTML 的時候，一定不只有一個物件，所以一定會遇到需要將物件排列的時候，此時就是要使用 display 的參數，主要有三種分別是：block, inline ,和 inline-block，在這邊將以兩條 bar 的關係訴說一下這三個參數的差別。

使用上一次文章的例子，我的網頁上長了兩條 bar，程式如下：

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>The HTML5 Herald</title>
  <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
  <style>
    .explain {
      background: yellow;
      border: 2px solid black;
      padding: 20px 10px 20px 10px;
      margin: 10px 10px;
    }
  </style>
</head>

<body>
  <div class="explain">
    我是一條 bar！
  </div>
  <div class="explain">
    我是第二條 bar！
  </div>
</body>
</html>

顯示的樣子如下：

其實這樣子就說完了第一個 display 屬性，因為 div 預設的就是 block，它的特性就是什麼屬性調整都沒有問題，而且會佔據一整行，如果要用 word 文件的角度去看它，相較於其他屬性， block 就很像一個段落。

如果我把 div 改成 span，預設的 block 就會改成 inline，直接上圖：
（也可以直接在 <style> .explain 中間加上 display: inline;）

可以發現我幫物件做的 Padding 和 Margin 上方的部分消失了，而且兩個 bar 並排在一起了，如果單純要去解釋為什麼會變成這樣的話，最好理解的方式也是使用 word 文件的角度去看它，如果說 block 是一個段落，那麼 inline 就是段落中的文字，因為它只是一小段文字，所以兩個 bar 可以並排，就像詞語跟詞語的連接一樣，而上方的部分消失則是因為當一段文字中的兩個詞語長得特別高，其他的詞語行高也會被跟著拉高，但這個屬性並不是拿來拉行高的呀，所以高是不會變的，用這樣的方式就能比較好理解其中的原因。

但是如果我想要兩條 bar 之間的關係像 inline，可以調的參數像 block，結合兩種的長處，這個時候就是使用 inline-block，直接將<style> .explain 中間的 display 修改為 display: inline-block;，顯示圖如下：